<template>
    <div style="width: 450px;">
        <el-table :data="state.list" border style="width: 100%">
            <el-table-column prop="id" label="ID" sortable width="120" />
            <el-table-column prop="goodsType" label="商品分类" width="100" />
            <el-table-column label="操作" min-width="120">
                <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-popconfirm confirm-button-text="是" cancel-button-text="否" :icon="InfoFilled" icon-color="#626AEF"
                        title="确认要删除该分类吗！" @confirm="handleDelete(scope.$index, scope.row)">
                        <template #reference>
                            <el-button size="small" type="danger">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
  
<script lang="ts" setup>
import { reactive, onMounted, ref } from 'vue'
import { useRouter } from "vue-router"
import { ElNotification, ElTable } from 'element-plus'
import api from '@/api'
import { InfoFilled } from '@element-plus/icons-vue'

const router = useRouter();


const state = reactive({
    list: [] as any
})

function getTableData() {
    api.goods.getGoodsTypeList()
        .then(response => {
            state.list = response.data.data
        })
        .catch(error => {
            console.log(error)
        })
}

onMounted(() => {
    // 页面加载完成后自动触发查询
    getTableData();
});

const handleEdit = (index: number, row: any) => {
    // 在这里编写编辑方法的逻辑
    // 路由跳转并传递参数
    router.push({
        name: 'editgoodstype', params: {
            id: row.id,
            goodsType: row.goodsType
        }
    })
}

const handleDelete = (index: number, row: any) => {
    // 在这里编写删除方法的逻辑
    api.goods.deleteGoodsType(row.id)
        .then(response => {
            ElNotification({
                title: 'Success',
                message: response.data.msg,
                type: 'success',
                duration: 1500
            })
            // 在这里编写删除成功后的逻辑
            // 从表格中删除行数据
            getTableData();
        })
        .catch(error => {
            ElNotification({
                title: 'Error',
                message: error.data.msg,
                type: 'error',
                duration: 1500
            })
            // 在这里编写删除失败后的逻辑
        });
};

</script>
  
  
<style scoped>
.example-pagination-block+.example-pagination-block {
    margin-top: 10px;
}

.example-pagination-block .example-demonstration {
    margin-bottom: 16px;
}
</style>